<!--订单管理-->
<template>
	<el-card>
		<el-row :gutter="20">
			<el-col :span="7" :offset="0">
				<el-input v-model="queryForm.query" placeholder="查找的订单号" />
			</el-col>
			<el-button type="primary" size="default" icon="ele-Right" style="margin: 1px 0px" @click="initGetOrdersList">搜索</el-button>
		</el-row>
	</el-card>
	<el-button type="primary" size="default" icon="ele-Plus" style="margin: 10px 1px" @click="dialogFormVisible=true">添加</el-button>
    <el-table :data="tableData" border style="width: 100%">
		<el-table-column prop="oid" label="订单号" width="180" text-align="content-center" />
		<el-table-column prop="num" label="订购数量/吨" width="380" />
		<el-table-column prop="category" label="商品类别" width="380" />
		<el-table-column prop="" label="操作" #default = "{row}">
			<el-button type="primary" icon="ele-Edit" plain @click="updateOrd(row)">编辑</el-button>
			<el-button type="danger" icon="ele-Delete" plain @click="delOrd(row)">删除</el-button>
		</el-table-column>
	</el-table>
	<!-- 添加订单的表单 -->
    <el-dialog v-model="dialogFormVisible" title="添加订单">
		<el-form :model="form">
			<el-form-item label="订单编号" :label-width="formLabelWidth">
				<el-input v-model="form.oid" />
			</el-form-item>
			<el-form-item label="订购数量/吨" :label-width="formLabelWidth">
				<el-input v-model="form.num" />
			</el-form-item>
			<el-form-item label="商品类别" :label-width="formLabelWidth">
				<el-input v-model="form.category" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleDialog">取消</el-button>
				<el-button type="primary" @click="initaddorder">确定</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 更新订单的表单 -->
	<el-dialog v-model="upOrd" title="更新订单">
		<el-form :model="form">
			<el-form-item label="订单编号" :label-width="formLabelWidth">
				<el-input v-model="form.oid" disabled="true"/>
			</el-form-item>
			<el-form-item label="订购数量/吨" :label-width="formLabelWidth">
				<el-input v-model="form.num" />
			</el-form-item>
			<el-form-item label="商品类别" :label-width="formLabelWidth">
				<el-input v-model="form.category" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="upOrd = false">取消</el-button>
				<el-button type="primary" @click="initupOrd">确定</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 删除订单的弹窗 -->
	<el-dialog v-model="deletebutton" title="删除信息" width="30%">
		<span>将永久删除该信息且无法撤销该操作是否确认？</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="deletebutton = false">取消</el-button>
				<el-button type="primary" @click="initdelete">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import {addOrder, delOrder, getOrders, upOrder} from '/@/api/orders'
import {getMessage, upDeport} from '/@/api/deport'
export default defineComponent({
	name: 'order',
	setup() {
        const handleDialog = ()=>{
			dialogFormVisible.value = false
			form.oid = ''
			form.num = 0
		}
		const outload = ref(false)//出库表单开关
        const tableData = ref([])
		const gridData = ref([])//出库的表格数据
		const outdetail = ref(false)
		const grid = ref({
			query:'',
			pagenum:1,
			pagesize:1000,
		})
		const initgetmessage = async()=>{
			const res = await getMessage(grid.value)
			gridData.value = res.data.value
			outload.value = true
		}
		
		const queryForm = ref({//查找信息的结构
			query: '',
			pagenum: 1,
			pagesize: 1000,
		});
        const initGetOrdersList = async()=>{//获取信息函数
            const res = await getOrders(queryForm.value)
            tableData.value = res.data.value
        }
        initGetOrdersList()
        const initaddorder = async ()=>{
            form.num = Number(form.num)
            await addOrder(form).then(initGetOrdersList)
			form.oid = ''
			form.num = 0
			form.category = ''
            dialogFormVisible.value = false
            
        }
        const form = reactive({
			oid: '',
			num: 0,
			category:''
		});
        const dialogFormVisible = ref(false)//添加订单的表单开关
		const upOrd = ref(false)//更新订单的表单开关
        const formLabelWidth = '140px'
		const updateOrd = (row: any)=>{
			upOrd.value = true
			form.oid = row.oid
			form.num = row.num
			form.category = row.category
		}
		const initupOrd = async()=>{
			form.num = Number(form.num)
			await upOrder(form).then(initGetOrdersList)
			form.oid = ''
			form.num = 0
			form.category = ''
			upOrd.value = false
			
		}
		const delOrd = (row: any)=>{
			deletebutton.value = true
			form.oid = row.oid
			form.num = row.num
			form.category = row.category
		}
		const initdelete = async()=>{
			await delOrder(form)
			deletebutton.value = false
			initGetOrdersList()
		}
		const addtoOutload = (row: any)=>{
			outload.value = true
			form.oid = row.oid
			form.num = row.num
			initgetmessage()
		}

		const outdata = reactive({
			id:'',
			num:0,
			sid:'',
			oid:''
		})
		const getdetail = (row: any)=>{
			outdata.sid = row.sid
			outdata.oid = form.oid
			outdetail.value = true
		}

		const deletebutton = ref(false)

		const initout = async()=>{
			outdata.num = Number(outdata.num)
			await upDeport(outdata)
			outdetail.value = false
			initgetmessage()
		}
		return {
			queryForm,
            handleDialog,
            tableData,
            form,
            dialogFormVisible,
            formLabelWidth,
			upOrd,
			deletebutton,
			outload,
			gridData,
			outdata,
			outdetail,
            initGetOrdersList,
            initaddorder,
			updateOrd,
			delOrd,
			addtoOutload,
			initupOrd,
			initdelete,
			initgetmessage,
			getdetail,
			initout
		};
	},
});
</script>
<style lang="scss" scoped>

</style>
